<template>
    <el-button type="success" :icon="Plus" @click="addNode('-1')">新增</el-button>
    <el-tree :data="treeNodes" 
            :props="{ children: 'list', label: 'name', disabled: '' }" 
            icon-class="el-icon-share"
            default-expand-all = true
            @node-click="handleNodeClick" 
    >
        <template #default="{ node, data }">
            <div class="custom-tree-node">
                <div class='el-button' style="border: 0px">
                    <el-icon color="#409EFC" >
                        <Document v-if ="data.nodeType == 1" style="width: 20px; height: 20px"  />
                            <Folder v-else style="width: 20px; height: 20px"/>
                    </el-icon>
                    <span> {{ data.name }}</span>
                </div>
                <div>
                    <el-button
                    v-show="data.nodeType == 1"
                    type="success"
                    size="small"
                    :icon="Plus"
                    circle
                    plain
                    @click.stop="addNode(data.id)"
                    />
                    <el-button
                    type="warning"
                    size="small"
                    :icon="Edit"
                    circle
                    plain
                    @click.stop="handleUpdate(scope.data)"
                    />
                    <el-button
                    type="danger"
                    size="small"
                    :icon="Delete"
                    circle
                    plain
                    @click.stop="handleDelete(scope.data)"
                    />
                </div>
            </div>
        </template>
    </el-tree>
    <addNodeComp :props="addNodeCompProps" @callback="callBackTree" ></addNodeComp>
</template>

<script setup lang="ts">
   /***基础组件引入***/
    import { reactive, ref, watch, onMounted, toRefs } from 'vue'
    import { ElTree, ElMessage } from 'element-plus';
    import { Document, Folder, Plus, Edit, Delete } from '@element-plus/icons-vue';

    /****子组件引入****/
    import addNodeComp from './addNode.vue';
    import editNodeComp from './editNode.vue';

    /*****请求组件引入****/
    import { appMenuTree} from '@/api/appMenu';


   // const deptTreeRef = ref(ElTree); 
    const state = reactive({
      treeNodes: [],
      currentRow:{},
      addNodeCompProps:{data:{},visible:false}
    });
    const {
      treeNodes,
      currentRow,
      addNodeCompProps,
    } = toRefs(state);


    function loadTreeNodes() {
      let appId=state.currentRow.id;
      appMenuTree(appId).then(response => {
        state.treeNodes = response.data;
      });
    }
    
    function addNode(parentId){
      let appId=state.currentRow.id;
      if(!appId){
         ElMessage.error('请选择应用');
         return;
      }
      state.addNodeCompProps.visible = true;
      state.addNodeCompProps.data = {appId: appId,parentId: parentId};
    }

    function callBackTree(){
      state.addNodeCompProps.visible=false;
      loadTreeNodes();
    }

     /**监控父组件传值并赋值***/
    /**监控父组件传值并赋值***/
    const parentData = defineProps({
        props: {
          visible: Boolean,
          data: Object
        }
    });

    watch(() => parentData.props,
       // 回调函数 callback
       (newValue, oldValue) => {
           if(!newValue || !newValue.id){
               state.treeNodes=[];
               return;
           }
           state.currentRow = newValue;
           loadTreeNodes();
       }, {immediate:true, deep: true}
    );

</script>

<style>
.custom-tree-node {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  padding-right: 8px;
  line-height: 40px0;
}

.el-tree-node__label{
  width: 100%
}

.el-tree-node__content {
  height: 40px;
}
</style>